<template>
	<div class="container-filled">
		<el-container>
			<el-main style="padding:0;">
				<!-- 展示表格 -->
				<el-table v-loading="loading" v-if="filterTableData" :data="filterTableData"
					:default-sort="{ prop: 'username' }" >
					<!-- 列展示 -->
					<el-table-column prop="username" label="用户名" sortable width="180" />
					<el-table-column v-for="item in elTableColumns" :prop="item.prop" :label="item.label"
						:width="item.width" />
					<el-table-column label="操作" fixed="right" width="250">
						<!-- 列头搜索框 -->
						<template #header>
							<el-input v-model="search" size="small" placeholder="搜索用户名" />
						</template>
						<!-- 默认列数据 -->
						<template v-slot="scope" #default>
							<el-button type="primary" size="small" @click="updataRow(scope.row)" link>修改密码
							</el-button>
							<el-button type="danger" size="small" v-show="!scope.row.userStop"
								@click="changeData('addStop/', scope.row._id)" link>封停
							</el-button>
							<el-button type="success" size="small" v-show="scope.row.userStop"
								@click="changeData('delStop/', scope.row._id)" link>解封
							</el-button>
							<el-button type="success" size="small" v-show="!scope.row.userAdmin"
								@click="changeData('addAdmin/', scope.row._id)" link>升级
							</el-button>
							<el-button type="danger" size="small" v-show="scope.row.userAdmin"
								@click="changeData('delAdmin/', scope.row._id)" link>降级
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<!-- 分页模块 -->
			<el-footer>
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :total="total" :current-page="pageNum"
					:default-page-size="pageSize" style="margin:1em auto 0 auto;" />
			</el-footer>
			<!-- 下载数据按钮 -->
			<el-button type="success" @click="serverDataToExcel">下载数据</el-button>
			<!-- 编辑框 -->
			<el-dialog v-model="centerDialogVisible" :title="nowUserRow.username" width="40%" destroy-on-close center>
				<div>
					<el-form :model="nowUserRow" label-width="120px">
						<el-form-item label="用户名">
							<el-input v-model="nowUserRow.username" disabled />
						</el-form-item>
						<el-form-item label="用户新密码">
							<el-input v-model="newPassword" />
						</el-form-item>
					</el-form>
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取消</el-button>
						<el-button type="primary" @click="updata">
							更新密码
						</el-button>
					</span>
				</template>
			</el-dialog>
		</el-container>
	</div>
</template>
<script setup>// @ts-nocheck
import { ElMessage } from "element-plus"
import { ref } from "vue"
import api from "../../api/api"

// 使用hook
import useList from "../../hooks/useList"
const {
	loading,
	pageNum,
	pageSize,
	total,
	search,
	filterTableData,
	handleSizeChange,
	handleCurrentChange,
	serverDataToExcel
} = useList("/admin/user", "username",undefined,"/admin/download/user","用户数据")

const elTableColumns = ref([{
	prop: "userMail",
	label: "用户邮箱",
	width: ""
}, {
	prop: "userPhone",
	label: "手机号码",
	width: ""
}, {
	prop: "userAdmin",
	label: "是否管理员",
	width: 120
}, {
	prop: "userStop",
	label: "是否封停",
	width: "120"
}
]),
	centerDialogVisible = ref(false),
	nowUserRow = ref({}),
	newPassword = ref("")

// 点击弹出更新框
function updataRow(val) {
	nowUserRow.value = val
	centerDialogVisible.value = true
}
// 修改用户的密码
function updata() {
	api.post("/admin/user/changePwd",
		{
			user_id: nowUserRow.value._id,
			password: newPassword.value
		}
	).then((res) => {
		if (res.data.errors) {
			ElMessage.error(res.data.errors[0].msg)
		} else {
			ElMessage.success(res.data.message)
		}
	})
	centerDialogVisible.value = false
}
// 根据传入的api地址与id 来请求修改数据
function changeData(path, id) {
	api.put("/admin/user/" + path + id).then((res) => {
		if (res.data.status === 0) {
			ElMessage.success(res.data.message)
			// 请求成功后后更新列表
			api.get("/admin/user").then((res) => {
				total.value = res.data.total
				userRows.value = res.data.rows
			})
		} else {
			ElMessage.error(res.data.msg)
		}
	})
}
</script>
<style lang="sass" scoped>

</style>